<template>
	<view class="container" :data-theme="theme">
		<view class="header">头部内容</view>
		<view class="content">
			<!-- 这里是可滚动的内容 -->
			<scroll-view class="scroll-view" scroll-y>
				<view class="scroll-view-inner">
					<view v-for="item in 100">
						{{item}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="footer">底部内容</view>
	</view>
</template>
<script>
	import {
		setThemeColor
	} from '../../../../utils/setTheme';
	let app = getApp()
	export default {
		data() {
			return {
				bgColor: "#fff",
				theme: app.globalData.theme,
			}
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
	}
</script>
<style lang="scss">
	page {
		height: 100%;


	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		height: 100px;
		background-color: lightblue;
	}

	.content {
		flex: 1;
		overflow: hidden;
	}

	.scroll-view {
		height: 100%;
	}

	.scroll-view-inner {
		height: 200%;
		/* 根据实际情况设置高度 */
		background-color: #fff;
		/* 内容区域背景色 */
	}
</style>